<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./assets/news.css" />
</head>

<body>
    <div id="news-list">
        <!-- <div class="news-item">
            <img class="thumb" src="http://www.liulongbin.top:3006/images/2.webp" alt="">
            <div class="right-box">
                <h1 class="title">华为5G随行WiFi发布，5G布局全面领先苹果、三星</h1>
                <div class="tags">
                    <span>华为</span>
                    <span>苹果</span>
                    <span>5G网络</span>
                </div>
                <div class="footer">
                    <div>
                        <span>驱动中国网络传媒</span>&nbsp;&nbsp;
                        <span>2019-10-26 16:51:30</span>
                    </div>
                    <span>评论数：32</span>
                </div>
            </div>
        </div> -->
    </div>

    <script src="./lib/jquery.js"></script>
    <script src="./lib/axios.js"></script>
    <script>
        // 接口文档：https://www.showdoc.com.cn/1834761734600444/8449563515660414
        //  在 公共接口中的 01-获取新闻列表
        (async () => {
            const { data: res } = await axios({
                method: 'GET',
                url: "http://www.liulongbin.top:3006/api/news",
            })
            console.log(res.data);
            document.querySelector("#news-list").innerHTML = render(res.data)

        })()

        // 封装渲染函数
        function render(data) {
            return data.map(item => {
                return `
        <div class="news-item">
            <img class="thumb" src="http://www.liulongbin.top:3006${item.img}" alt="">
            <div class="right-box">
                <h1 class="title">${item.title}</h1>
                <div class="tags">
                    ${renderTag(item.tags)}
                </div>
                <div class="footer">
                    <div>
                        <span>${item.source}</span>&nbsp;&nbsp;
                        <span>${getDateTimes()}</span>
                    </div>
                    <span>评论数：${item.cmtcount}</span>
                </div>
            </div>
        </div>
                `
            }).join('')
        }

        // 渲染tags
        function renderTag(tags) {
            return tags.split(',').map(item => {
                return `
            <span>${item}</span>
            `
            }).join('')
        }

        // 获得当前时间函数封装
        function getDateTimes() {
            const date = new Date()
            let year = date.getFullYear()
            let month = date.getMonth()
            let dates = date.getDate()
            let h = getZero(date.getHours())
            let m = getZero(date.getMinutes())
            let s = getZero(date.getSeconds())
            // 时间补零函数
            function getZero(num) {
                return num < 10 ? '0' + num : num
            }
            // 月份要 +1
            return `当前北京时间${year}年${month + 1}月${dates}日${h}:${m}:${s}`
        }

    </script>
</body>

</html>